<template>
  <div class="GdwyyAppDevelop">
    <GdwyyAppBigTitle icon="zl/icon_fz" :time="queryParam.dayId" title="发展-月累计"></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main" v-else>
      <GdwyyAppSmallTitle title="营服总发展" class="block-pd"></GdwyyAppSmallTitle>
      <div class="zl flex-center flex-between fill-w border-box block-pd">
        <div class="item border-box" v-for="(item, index) in zlList" :key="index + 'zl'">
          <div class="flex flex-column flex-center">
            <div class="font-14 color333">{{ item.title }}</div>
            <div class="des font-12 color999">发展月累计/目标</div>
            <div class="big-num flex main-blue">
              <span class="font-24"
                >{{ zlData[item.lj] }}/{{ zlData[item.mb] || '-' }} <span class="font-14">户</span></span
              >
            </div>
          </div>

          <div class="bottom fill-w">
            <div class="cicle flex fill-w flex-center" v-for="(ite, inde) in desList" :key="inde + 'des'">
              <div class="label color999 font-12">{{ ite.label }}</div>
              <div class="num color333 font-14 flex-1">{{ zlData[item[ite.model]] || 0 }} {{ ite.unit }}</div>
            </div>
          </div>
        </div>
      </div>

      <div v-for="(item, index) in blockList" :key="index + 'block'" class="other">
        <GdwyyAppSmallTitle :title="item.title" class="block-pd"></GdwyyAppSmallTitle>
        <div :class="{ mgb: ind === 0 }" v-for="(ite, ind) in zlList" :key="ind + 'zlb'" class="flex-center block-pd">
          <div class="left flex-s-0 flex flex-center flex-column">
            <img class="icon" :src="require('../../../../assets/imgs/reconsitution/zl/' + ite.icon + '.png')" />
            <div class="font-12 color333">{{ ite.title }}</div>
          </div>
          <div class="middle flex-s-0">
            <div class="font-12 color333">发展月累计/目标</div>
            <div class="font-20 color333">
              <!-- 营业厅的发展月累计： KD_M_LJ_FZ 不需要加YY_前缀-->
              {{
                (ite.lj === 'KD_M_LJ_FZ' && item.target === 'YY_'
                  ? otherData[ite.lj]
                  : otherData[item.target + ite.lj]) || 0
              }}/{{ otherData[item.target + ite.blockMb] || '-' }}
            </div>
          </div>
          <div class="fill-w">
            <div class="cicle flex fill-w flex-center" v-for="(dite, dinde) in desList" :key="dinde + 'des'">
              <div class="label color999 font-12">{{ dite.label }}</div>
              <div class="num color333 font-14 flex-1">
                {{ otherData[item.target + ite[dite.blockModel]] || 0 }}{{ dite.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'

const _apiConfig = [
  {
    url: '8a31cdd68a7e768a018ac23e2a8b000f',
    resultParamsName: 'zlData',
    loading: 'loading',
  },
  {
    url: '8a31cdd68a7e768a018ac241ef270010',
    resultParamsName: 'otherData',
  },
]
export default {
  name: 'GdwyyAppDevelop',
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      zlData: {},
      otherData: {},
      zlList: [
        {
          icon: 'icon_ywsj',
          title: '移网手机',
          lj: 'YW_M_LJ_FZ',
          mb: 'YW_M_MB',
          wcl: 'YW_MB_WCL',
          zw: 'YW_M_QL_ZW',
          jz: 'YW_M_JZ',

          blockZw: 'YW_M_LJ_ZW',
          blockWcl: 'YW_M_WCL',
          blockMb: 'YW_M_MB',
        },
        {
          icon: 'icon_kd',
          title: '宽带',
          lj: 'KD_M_LJ_FZ', // 营业模块 只有这一个没有加YY_
          mb: 'KD_M_MB',
          wcl: 'KD_M_WCL',
          zw: 'KD_M_QL_ZW',
          jz: 'KD_M_JZ',

          blockZw: 'KD_M_LJ_ZW',
          blockWcl: 'KD_M_WCL',
          blockMb: 'KD_M_MB',
        },
      ],
      blockList: [
        {
          title: '营业',
          target: 'YY_',
        },
        {
          title: '智家',
          target: 'ZJ_',
        },
        {
          title: '社渠',
          target: 'SQ_',
        },
      ],
      loading: false,
      queryParam: {
        gridId: '',
        dayId: '',
      },
      desList: [
        {
          label: '完成率',
          model: 'wcl',
          blockModel: 'blockWcl',
          unit: '%',
        },
        {
          label: '在网',
          blockModel: 'blockZw',
          model: 'zw',
        },
      ],
    }
  },

  created() {
    const that = this
    that.initData()

    function main(e) {
      // that.loading = true
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        that.setAllRequest(_apiConfig, { ...that.queryParam, gridId: localStorage.getItem('$gridId') })
      }
    }
    // 此处的监听 似乎是只在app中生效,在本地开的前端服务是不生效的
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      this.setAllRequest(_apiConfig, this.queryParam)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdwyyAppDevelop {
  margin-bottom: 3.2vw;
  .main {
    background-color: #fff;
    padding-bottom: 3.2vw;
  }

  .zl {
    .des {
      margin: 1.6vw;
    }
    .item {
      .bg('zl/bg-card-发展.png');
      width: 44.2667vw;
      // height: 39.4667vw;
      padding: 2.1333vw 4.2667vw;
    }
    .bfb {
      margin-left: 1.8667vw;
    }
    .bottom {
      margin-top: 2.9333vw;
      padding-bottom: 8px;
    }
    .num {
      text-align: right;
    }
  }

  .other {
    .icon {
      width: 40px;
      height: 40px;
    }
    .left {
      width: 15%;
    }
    .middle {
      margin-left: 40px;
      margin-right: 50px;
    }
    .mgb {
      margin-bottom: 8px;
    }
    .num {
      text-align: right;
    }
  }
}
</style>